<template>
  <el-form-item label="频道">
        <el-select v-model="channelId" placeholder="请选择频道" @change="hChange">
          <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'channlebo',
  props: ['value'],
  data () {
    return {
      // 选择默认数
      // 当前选中频道
      channelId: this.value,
      // 频道数据
      channelList: []
    }
  },
  watch: {
    // 如果 value值有变化，则直接赋值给channelId（v-model中的数据）
    // value (newVal, oldVal) {
    value () {
      // console.log ('value的值变化了', this.value)
      this.channelId = this.value
    }
  },
  created () {
    this.localStorage()
  },
  methods: {
    hChange () {
      // 把当前用户选中的值抛出来
      this.$emit('input', this.channelId)
    },
    async localStorage () {
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })
      console.log('频道数据', res)
      this.channelList = res.data.data.channels
    }
  }
}
</script>

<style>

</style>
